<template>
    <div>
    <TitleBar :title="titleBarText"/>
        <text class="text">{{basicUsage}}</text>
        <image @load="onImageLoad" class="image" :src="placeholderUrl" :placeholder="placeholderUrl"></image>
        <text class="text">resize</text>
        <image ref="poster" class="image" :src="localFile" ></image>
        <text class="text" @click="saveImg">{{saveImage}}</text>

    </div>
</template>
<script>
import TitleBar from "../components/TitleBar.vue";
import { toast, getBaseImageUrl } from "../utils/config";
export default {
  components: {
    TitleBar
  },
  data: {
    titleBarText: "Image标签",
    saveImage: "保存图片",
    basicUsage: "基本用法 + placeholder",
    placeholderUrl:
      "https://cdn.dribbble.com/users/79978/screenshots/3892720/bliss_club.png",
    resizeUrl:
      "https://gw.alicdn.com/tfs/TB1dZ4WowoQMeJjy0FnXXb8gFXa-950-1267.jpg"
  },
  methods: {
    // ! 模拟器保存有问题，真机还需测试
    saveImg: function() {
      let test = this.$refs.poster;
      test.save(result => {
        if (result.success) {
          toast("save success");
        } else {
          toast("save error");
        }
      });
    },
    onImageLoad: function(event) {
      if (event.success) toast("load success");
    }
  },
  computed: {
    localFile: function() {
      return getBaseImageUrl() + "back.png";
    }
  }
};
</script>
<style scoped>
.text {
  font-size: 30px;
}
.image {
  width: 200px;
  height: 200px;
}
</style>


